<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* .content {
            width: 10rem;
        } */
        
        .top {
            width: 10rem;
            height: 5.333333rem;
            background: url(./img/rectangle1.png)no-repeat;
        }
        
        .one {
            display: flex;
            justify-content: space-between;
            height: 1.066667rem;
        }
        
        .one .one-left {
            width: 1.44rem;
            height: .48rem;
            font-size: 15px;
            color: #000;
            margin: .56rem .373333rem;
            font-family: Helvetica;
            font-weight: 600;
        }
        
        .two {
            display: flex;
            justify-content: space-between;
            margin-top: .053333rem;
        }
        
        .two .three {
            width: .986667rem;
            height: .8rem;
            font-size: 24px;
            color: #fff;
            font-family: "苹方-繁 中粗体";
            font-weight: 600;
            margin-left: 1.12rem;
            line-height: .8rem;
        }
        
        .two .four {
            width: 2.346667rem;
            height: .8rem;
            font-size: 24px;
            font-family: "苹方-繁 中粗体";
            font-weight: 600;
            color: #FFFFFF;
            line-height: .8rem;
            margin-left: .453333rem;
        }
        
        .two-right {
            width: .693333rem;
            height: .693333rem;
            margin-top: .533333rem;
            margin-right: .4rem;
        }
        
        .top .five {
            width: 9.12rem;
            height: 1.893333rem;
            background: url(./img/rectangle5.png) no-repeat;
            margin-left: .426667rem;
            margin-top: .8rem;
        }
        
        .five .five-top {
            width: 2.24rem;
            height: .56rem;
            font-size: 14px;
            font-family: "苹方-繁 中粗体";
            font-weight: 600;
            color: #313131;
            line-height: .56rem;
            margin-left: .213333rem;
            margin-top: .213333rem;
        }
        
        .five-left {
            width: .453333rem;
            height: .533333rem;
            font-size: 14px;
            font-family: "苹方-繁 中粗体";
            font-weight: 600;
            color: #313131;
            line-height: .533333rem;
            margin-left: .213333rem;
        }
        
        .five-right {
            width: 1.093333rem;
            height: .48rem;
            font-size: 12px;
            font-family: "苹方-繁 常规体";
            font-weight: 400;
            color: #313131;
            line-height: .533333rem;
        }
        
        .five .five-bottom {
            width: 8.613333rem;
            height: .106667rem;
            background: #D8D8D8;
            border-radius: 2px;
        }
        
        .five .five-center {
            margin-top: .053333rem;
            height: .933333rem;
            line-height: .346667rem;
        }
        
        .cee {
            background: #F6F7FA;
        }
        
        .seven {
            width: 2.133333rem;
            height: .8rem;
            font-size: 20px;
            font-family: "苹方-繁 中粗体";
            font-weight: 600;
            color: #313131;
            line-height: .8rem;
            margin-left: .266667rem;
            margin-top: .426667rem;
        }
        
        .wook {
            display: flex;
            justify-content: space-around;
        }
        
        .eight {
            width: 4.8rem;
            height: 2.026667rem;
            background: #fff;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            margin-left: .266667rem;
            margin-top: .266667rem;
            border-radius: 5px;
        }
        
        .eight-aa {
            width: 4.72rem;
            height: .32rem;
            font-size: 10px;
            font-family: "苹方-繁 常规体";
            font-weight: 400;
            color: #313131;
            line-height: .32rem;
        }
        
        .eight-bb {
            width: 3.306667rem;
            height: .586667rem;
            font-size: 14px;
            font-family: "苹方-繁 中粗体";
            font-weight: 600;
            color: #323232;
            line-height: .773333rem;
        }
        
        .eight-cc {
            width: 2.186667rem;
            height: .48rem;
            font-size: 12px;
            font-family: "苹方-繁 常规体";
            font-weight: 400;
            color: #313131;
            line-height: .48rem;
        }
        
        .eight-dd {
            width: 1.28rem;
            height: .426667rem;
            font-size: 10px;
            font-family: "苹方-繁 常规体";
            font-weight: 400;
            color: #313131;
            line-height: .72rem;
        }
        
        .eight-ff {
            height: .906667rem;
            line-height: .586667rem;
        }
        
        .eight img {
            width: .533333rem;
            height: .4rem;
        }
        
        .kkk {
            display: flex;
            justify-content: space-around;
            border-radius: 5px;
        }
        
        .kkk-left {
            width: 4.266667rem;
            height: 1.546667rem;
            background: #fff;
            margin-top: .533333rem;
            margin-left: .266667rem;
        }
        
        .kkk-bb {
            width: 3.306667rem;
            height: .586667rem;
            font-size: 14px;
            font-family: "苹方-繁 中粗体";
            font-weight: 600;
            color: #323232;
            line-height: .773333rem;
        }
        
        .nine {
            font-size: 10px;
            font-family: "苹方-繁 常规体";
        }
        
        .tupian {
            margin-top: .8rem;
            margin-left: .266667rem;
        }
        
        .dada {
            margin-left: .266667rem;
            width: 2.133333rem;
            height: .8rem;
            font-size: 20px;
            font-family: "苹方-繁 中粗体";
            font-weight: 600;
            color: #313131;
            line-height: .8rem;
        }
        
        .tupian1 {
            margin-left: .266667rem;
        }
    </style>
</head>

<body>
    <script src="./flexible.js"></script>
    <div class='content'>
        <div class="top">
            <div class="one">
                <div class="one-left">
                    <span>9:41</span>

                </div>
                <div class="one-right"><img src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng1be20f0eced1f466b6b4dc3a981fc6b52a4b9cf391debed94bcf2e01f7c38668" alt="">
                    <img src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnga05957db16243a63d7c74f823baeb36bbafa63e1b3e30902724223c367fb5eeb" alt="">
                </div>
            </div>
            <div class="two">
                <div class="two-left">
                    <p class="three">Hi~</p>
                    <p class="four">QIU&nbsp;Bei</p>
                </div>
                <div class="two-right">
                    <img src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng90f72bdb9612af2a2d217326541890b08ca369004fd65bb51b9b6a82fe0271ec" alt="">
                </div>
            </div>
            <div class="five">
                <div>
                    <p class="five-top">今日学习时长</p>
                </div>
                <div class="five-center">
                    <span class="five-left">02</span>
                    <span class="five-right">/20min</span>
                </div>
                <div class="five-bottom"></div>
            </div>

        </div>
        <div class="cee">
            <div class="seven">
                <p>课程提醒</p>
            </div>
            <div class="wook">
                <div class="eight">
                    <p class="eight-aa">2021.05.30&nbsp;星期三&nbsp;09:00~11:00</p>
                    <p class="eight-bb">EF中国说-公路旅行</p>
                    <div class="eight-ff">
                        <img src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng2dd5af9d8112f19ca8b8f96ed84c085785c7c3cafe2ceccae10d973f2167bccd" alt="">
                        <span class="eight-cc">线上&nbsp;Zoom平台</span>
                        <span class="eight-dd">生活俱乐</span>
                    </div>
                </div>
                <div>
                    <div class="eight">
                        <p class="eight-aa">2021.05.30&nbsp;星期三&nbsp;09:00~11:00</p>
                        <p class="eight-bb">L5U6&nbsp;Describing&nbsp;clothing</p>
                        <div class="eight-ff">
                            <img src="./img/ic_place.png" alt="">
                            <span class="eight-cc">南山中心</span>

                        </div>
                    </div>
                </div>
            </div>
            <div class="kkk">
                <div class="kkk-left">
                    <span class="kkk-bb">0</span>
                    <span class="nine">12</span>
                    <img src="./img/ic_internet.png" alt="">
                    <!-- <p class="eight-cc">在线自学教程</p> -->

                </div>
                <div class="kkk-left">
                    <span class="kkk-bb">0</span>
                    <span class="nine">15</span>

                    <!-- <p class="eight-cc">教师指导课程</p> -->

                </div>


            </div>
            <div class="tupian"><img src="./img/image(1).png" alt=""></div>
            <div class="dada">课程提醒</div>
            <div class="tupian1"><img src="./img/image.png" alt=""></div>


        </div>
    </div>
</body>

</html>